<template>
	<view  class="parent-view">
		<view class="ct-tab-view">
			<text :class="[tabSelect==0?'ct-tab-item-select':'ct-tab-item']" @click="tabSelectClick" data-index="0">选择日期</text>
			<text v-if="isShowInput==0" :class="[tabSelect==1?'ct-tab-item-select':'ct-tab-item']" @click="tabSelectClick" data-index="1">手动输入</text>
		</view>
		<view v-if="tabSelect==0" class="ct-choose-time-parent" @click="timeSelectClick" data-index="0">
			<image class="ct-choose-time-img" :src="[timeSelect==0?'../../static/fan_png_ic_radio_checked.png':'../../static/fan_png_ic_radio_unchecked.png']"/>
			<text :class="[timeSelect==0?'ct-choose-time-select':'ct-choose-time']">选择公历：{{gongliYearTxt}}</text>
		</view>
		<view v-if="tabSelect==0" class="ct-choose-time-parent" style="margin-top: 10rpx;"  @click="timeSelectClick" data-index="1">
			<image class="ct-choose-time-img" :src="[timeSelect==1?'../../static/fan_png_ic_radio_checked.png':'../../static/fan_png_ic_radio_unchecked.png']"/>
			<text :class="[timeSelect==1?'ct-choose-time-select':'ct-choose-time']">选择农历：{{nongliYearTxt}}</text>
		</view>
		<!-- 时间滑轮 -->
		<view v-if="tabSelect==0" class="ct-wheel-view">
			<picker-view class="mpvue-picker-view"  :indicator-style="indicatorStyle" :value="curData" @change="bindChange">
				<picker-view-column>
					<view class="mpvue-picker-view-item"  v-for="(item, index) in years" :key="index">{{ item }}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="mpvue-picker-view-item"  v-for="(item, index) in months" :key="index">{{ item }}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="mpvue-picker-view-item"  v-for="(item, index) in days" :key="index">{{ item }}日</view>
				</picker-view-column>
			</picker-view>
		</view>
		<!-- 日期输入 -->
		<textarea v-if="tabSelect==1" class="ct-input" 
		placeholder="请手动输入日期：例如：公元1354年、元朝至正十四年 冬月廿八日子时生、出嫁、娶妻..." @input="timeInput" ></textarea>
		<text class="ct-qingkong" @click="qingkongClick">清空日期</text>
		<view class="ct-btn-view">
			<text class="ct-cancle" @click="cancleClick">取消</text>
			<text class="ct-sure" @click="sureClick">确认</text>
		</view>
	</view>
</template>

<script>
	import {getLunar} from 'chinese-lunar-calendar'
	import request from '../index/request.js';
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			});
			const date = new Date();
			const years = [];
			const year = date.getFullYear();
			const months = [];
			const month = date.getMonth() + 1;
			const days = [];
			const day = date.getDate();
			for (let i = 1900; i <= date.getFullYear(); i++) {
				years.push(i);
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i);
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i);
			}
			return {
				tabSelect:0,
				timeSelect:0,
				currentDateSelect: '',
				currentInputTime: '',
				gongliYearTxt:"",
				nongliYearTxt:"",
				years,
				year,
				months,
				month,
				days,
				day,
				curData: [9999, month - 1, day - 1],
				indicatorStyle: `height: ${Math.round(uni.getSystemInfoSync().screenWidth / (750 / 45))}px;`,
				isShowInput:0,
				todayTime:"",
			}
		},
		methods: {
			onLoad: function(options) {
				if(options.isShowInput){
					this.isShowInput=options.isShowInput
				}
				this.appUtil.saveAppInviteId(options)
				this.currentDateSelect=this.getDate()
				this.todayTime=this.currentDateSelect
				var date=this.currentDateSelect.split('-')
				this.gongliYearTxt=date[0]+"年"+date[1]+"月"+date[2]+"日"
				
				var nongli=getLunar(this.year, this.month, this.day)
				this.nongliYearTxt=nongli.lunarYear+" "+nongli.dateStr
			},
			onShow:function(){
				this.share.url= '/pages/tabBar/home/index?appInviteId='+this.appUtil.getAppInviteId()
				this.share.shareType=1
			},
			timeInput:function(event){
				this.currentInputTime = event.target.value
			},
			getDate:function(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 50;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			bindChange(e) {
				const val = e.detail.value;
				console.log('当前:' + val);
				this.curData = val;
				this.year = this.years[val[0]];
				this.month = this.months[val[1]];
				this.day = this.days[val[2]];
				//将选择的年月日变为number形式，便于比较之用
				var y = parseInt(this.year);
				var m = parseInt(this.month);
				var d = parseInt(this.day);
				//选择不同月份显示的天数不同
				if (m == 1 || m == 3 || m == 5 || m == 7 || m == 8 || m == 10 || m == 12) {
					if (this.days.length != 31) {
						this.days = [];
						for (let i = 1; i <= 31; i++) {
							this.days.push(i);
						}
					}
				} else if (m == 4 || m == 6 || m == 9 || m == 11) {
					if (this.days.length != 30) {
						this.days = [];
						for (let i = 1; i <= 30; i++) {
							this.days.push(i);
						}
					}
				} else if (m == 2) {
					if ((y % 4 == 0 && y % 100 != 0) || y % 400 == 0) {
						//闰年
						if (this.days.length != 29) {
							this.days = [];
							for (let i = 1; i <= 29; i++) {
								this.days.push(i);
							}
						}
					} else {
						//平年
						if (this.days.length != 28) {
							this.days = [];
							for (let i = 1; i <= 28; i++) {
								this.days.push(i);
							}
						}
					}
				}
				//处理选择今年的情况
				if (y == this.currentYear) {
					//最多显示到当前月份
					if (this.months.length != this.currentMonth) {
						this.months = [];
						for (let i = 1; i <= this.currentMonth; i++) {
							this.months.push(i);
						}
					}
					//如果选择的是当前月份，那么日最多显示到今天
					if (m == this.currentMonth) {
						if (this.days.length != this.currentDay) {
							this.days = [];
							for (let i = 1; i <= this.currentDay; i++) {
								this.days.push(i);
							}
						}
					}
				} else {
					this.months = [];
					for (let i = 1; i <= 12; i++) {
						this.months.push(i);
					}
				}
				this.month = this.check0(this.month);
				this.day = this.check0(this.day);
				this.currentDateSelect= this.year.toString() + '-' + this.month.toString() + '-' + this.day.toString()
				console.log('当前选中' + this.currentDateSelect);
				var nongli=getLunar(this.year, this.month, this.day)
				this.gongliYearTxt=this.year.toString() + '年' + this.month.toString() + '月' + this.day.toString()+"日"
				this.nongliYearTxt=nongli.lunarYear+" "+nongli.dateStr
			},
			check0(num){
				num = +num;
				return num > 9 ? num : ('0'+num);
			},
			cancleClick:function(){
				uni.navigateBack()
			},
			sureClick:function(){
				var time;
				if(this.tabSelect==0){
					time=this.currentDateSelect
					var time1=this.todayTime.replace("-","")
					var time2=time.replace("-","")
					if(parseInt(time2)>parseInt(time1)){
						uni.showToast({
							title:"所选时间超出当前时间"
						})
						return
					}
				}else if(this.tabSelect==1){
					time=this.currentInputTime
				}
				var obj = {
					startTime: time,
					// 0为输入内容
					timeType:this.tabSelect,
					dateType:this.timeSelect
				};
				uni.$emit('selectTimeReturn', obj);
				uni.navigateBack()
			},
			qingkongClick:function(){
				var obj = {
					startTime: "",
					timeType:0,
					dateType:0
				};
				uni.$emit('selectTimeReturn', obj);
				uni.navigateBack()
			},
			tabSelectClick:function(event){
				this.tabSelect=event.currentTarget.dataset.index
			},
			timeSelectClick:function(event){
				this.timeSelect=event.currentTarget.dataset.index
			}
		}
	}
</script>

<style>
	@import "index.css";
</style>
